<script>
import { normal_option } from "../common";
import Base from "./Base";

export default {
  name: "ChartScatter",
  mixins: [Base],
  data() {
    return {
      defaultOption: {
        ...normal_option,
        ...{
          grid: {
            right: 20,
            bottom: 50,
            top: 40,
            left: "15%",
          },
          legend: {
            show: true,
            orient: "horizontal",
          },
        },
        color: ["#72C141", "#D9211F"],
        tooltip: { show: true },
        xAxis: {
          show: true,
          type: "category",
          axisLine: {
            show: true,
          }, // 坐标轴线
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
            interval: 0,
            align: "center",
            width: 45,
            overflow: "breakAll",
            ellipsis: "...",
          }, // 坐标轴标签
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
          }, // 坐标轴标签
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [],
      },
      defaultSeries: {
        name: "",
        type: "line",
        symbol: "circle",
        lineStyle: {
          width: 1,
          type: "dashed",
        },
      },
    };
  },
  computed: {
    option: function () {
      let series = [],
        length = this.dataset.dimensions.length - 1;

      for (let i = 0; i < length; i++) {
        series.push({
          ...this.defaultSeries,
          name:
            this.dataset.option &&
            this.dataset.option.nameList &&
            this.dataset.option.nameList.length
              ? this.dataset.option.nameList[i]
              : "",
        });
      }
      return {
        ...this.defaultOption,
        ...this.dataset.option,
        dataset: {
          dimensions: this.dataset.dimensions,
          source: this.dataset.source.reduce((r, c) => {
            r.push({
              ...c,
              tooltip_value: c[this.dataset.dimensions[1]],
            });
            return r;
          }, []),
        },
        series,
      };
    },
  },
};
</script>
